<template>
    <div class="salary-panel">
      <div class="salary-title">{{ title }}</div>
      <div class="salary-amount">{{ amount }}</div>
      <div class="salary-unit">万元</div>
      <div class="salary-icon">{{ icon }}</div>
    </div>
</template>
  
<script setup lang="ts">
  import { computed } from 'vue';
  
  const props = defineProps<{
    type: 'month' | 'quarter' | 'year';
    amount: string | number; 
  }>();
  
  const title = computed(() => {
    switch (props.type) {
      case 'month': return '本月已发工资';
      case 'quarter': return '本季已发工资';
      case 'year': return '本年已发工资';
      default: return '';
    }
  });
  
  const icon = computed(() => {
    switch (props.type) {
      case 'month': return '月';
      case 'quarter': return '季';
      case 'year': return '年';
      default: return '';
    }
  });
  </script>
  
  <style lang="less" scoped>
  @import '../variables.less';
  
  .salary-panel {
    flex: 1; // Take equal space
    background-color: rgba(3, 28, 66, 0.8);
    border: 1px solid @panel-border-color;
    border-radius: 5px;
    padding: @panel-padding;
    text-align: center;
    position: relative;
  }
  
  .salary-title {
    font-size: 14px;
    color: @text-color;
    margin-bottom: 10px;
  }
  
  .salary-amount {
    font-size: 22px;
    font-weight: bold;
    color: @primary-color;
  }
  
  .salary-unit {
    font-size: 12px;
    color: darken(@text-color, 10%);
    display: block;
  }
  
  .salary-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 24px;
    color: rgba(0, 153, 255, 0.5);
    background: rgba(0, 30, 60, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>